<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <!--      搜索组件-->
      <div class="search-list">
        <div class="time-day-box">当前时间：{{ searchForm.time ? searchForm.time : Weekdate }}</div>
        <SearchModle dataKey="training" @searchFn="searchFn"></SearchModle>
        <!--        下载-->
        <div class="search-list-right">
          <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              size="small"
              :picker-options="pickerOptions1">
          </el-date-picker>
          <el-button plain disabled v-if="!searchBox.start_time" size="small">带班记录导出</el-button>
          <downexcel type="leadTeacher" :option="searchBox" v-else></downexcel>
        </div>
      </div>
      <!--本体列表，数据 -->
      <el-table
          ref="multipleTable"
          :data="arryList"
          :stripe="tableStripe"
          :border="tableBorder"
          tooltip-effect="dark"
          header-cell-class-name="table-text-c"
          cell-class-name="table-text-c">
        <el-table-column
            align="center"
            prop="id"
            label="班级"
            width="200">
          <template slot-scope="scope">
            <span :class="scope.row.list.length?'':'colorRed'">{{scope.row.class_name}}</span>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="name"
            label="带班详情">
          <template slot-scope="scope">
            <div v-if="scope.row.list.length" class="leadPage">
              <div class="lead-list" v-for="item in scope.row.list">
                <div class="leadname">老师：{{item.realname}}</div>
                <div class="leadtime">签到时间：{{item.time}}</div>
<!--                <el-button size="mini" type="danger" class="leadBtn" plain>删除</el-button>-->
              </div>
            </div>
            <div v-else>
              <span style="color: #ddd">暂无记录</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="height40"></div>
  </div>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      arryList: [], // 数据列表
      Weekdate: '--',
      Weektime: '--',
      weekName: '--',
      week: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      searchForm: {
        time: ''
      },
      value1: [],
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7
        }
      },
      training: 'leadTeacher',
      searchBox: {
        start_time: '',
        end_time: ''
      }
    }
  },
  watch: {
    value1() {
      console.log('时间变更了', this.value1)
      this.searchBox.start_time = this.value1?this.value1[0]:''
      this.searchBox.end_time = this.value1?this.value1[1]:''
    }
  },
  created() {
    this.InitFn()
    this.timerID = setInterval(() => {
      this.updateTime()
    }, 1000)
  },
  methods: {
    // 初始化
    InitFn() {
      this.$fetch(this.api.classActive.lead.index, this.searchForm).then((response) => {
        if (!response.code) {
          this.arryList = JSON.parse(JSON.stringify(response.list))
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    handleSelectionChange(val) {
      this.handleSelection = val
    },
    // 搜索组件
    searchFn(option) {
      console.log(option)
      this.searchForm = option
      this.InitFn()
    },
    standarFn(type) {
      this.standardvisible = true
      this.standardtype = type
    },
    updateTime () {
      let cd = new Date()
      this.Weektime = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2)
      this.Weekdate = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2)
      this.weekName = this.week[cd.getDay()]
    },
    zeroPadding (num, digit) {
      let zero = ''
      for (let i = 0; i < digit; i++) {
        zero += '0'
      }
      return (zero + num).slice(-digit)
    },
  },
  mounted() {
  },
}
</script>
<style scoped>
.lead-list {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fddeae;
  margin-bottom: 5px;
  border-radius: 2px;
  padding: 5px 0;
}
.lead-list:last-child {
  margin-bottom: 0;
}
.lead-list .leadname {
  display: block;
  width: 150px;

  padding-left: 20px;
  text-align: left;
}
.lead-list .leadtime{
  padding-right: 20px;
  flex: 1;
  text-align: left;
}
.lead-list .leadBtn{
  margin-right: 20px;
}
.lead-list .leadBtn span {
  margin-right: 0 !important;
}
.time-day-line{
  display: flex;
  align-items: center;
}
.time-day-box{
  margin-right: 10px;
  font-size: 16px;
}
.colorRed{
  color:#f55151;
}
.leadPage .lead-list{
  display: flex;
  align-items: center;
}
</style>

